<template>
    <div id="companyList">
        <div id="com-body-list" v-if="showMsg == 1">
            <div v-for="(i,index) in companyLists" :key="i" class="similar-company" @click="toCompanyDetail(index)">
                <div>
                    <div style="display:inline-block;">
                        <p class="txyx">{{i.abbrName}}</p>
                        <p class="texts">{{i.financeName}} | {{i.tradeName}}</p>
                    </div>
                    <div class="com-tx">
                        <img :src="'https://res.mashangu.com/'+i.img" alt="">
                    </div>
                </div>
                <div class="s-bottom">
                    <p>
                        在招
                        <span class="locate-detail job-hover" @click="goJobDetail()">{{i.recentPoiName}}</span>
                        等<span class="locate-detail">{{i.comPubNum}}</span>个岗位
                    </p>
                </div>
            </div>
        </div>
        <div v-if="showMsg == 1">
            <!-- :totalpage="totalPages" -->
            <pages v-on:pageNum="pageIndexChange($event)" :totalpage="totalPages"/>
        </div>
        <div v-if="showMsg == 0">
            <cempty />
        </div>
    </div>
</template>
<script>
import pages from '../tool/pages.vue'
import {getCompanyList} from '../../api/companyList'
import cempty from '../company/cempty.vue'
export default {
    components: { 
        'pages' : pages,
        'cempty': cempty
    },
    data() {
        return {
            totalPages:0,
            companyLists:[],
            pageIndexs:1,
            cCheck:{
                areaId: null,
                financeIdList: "",
                scaleIdList: "",
                tradeIdList: ""
            },
            showMsg:1
        }
    },
    props:['companycheck'],
    watch: {
        companycheck:{ //深度监听，可监听到对象、数组的变化
            handler (newV, oldV) {
                this.cCheck = newV;
                this.pageIndexs = 1;
                console.log(newV)
                getCompanyList(1,newV.areaId,newV.financeIdList,newV.scaleIdList,newV.tradeIdList).then(res =>{
                    console.log(res.data);
                    // this.companyLists = res.data.data;
                    let total = res.data.totalCount;
                    if(total == 0){
                        this.showMsg = 0;
                    }
                    else{
                        this.showMsg = 1;
                    }
                    let addOne = total % 12;
                    if(addOne>0){
                        this.totalPages = parseInt(total/12) + 1;
                    }
                    else{
                        this.totalPages = parseInt(total/12);
                    }
                })
            },
            deep:true
        }
    },
    created() {
        getCompanyList(1).then(res =>{
            // console.log(res.data);
            this.companyLists = res.data.data;
            let total = res.data.totalCount;
            let addOne = total % 12;
            if(addOne>0){
                this.totalPages = parseInt(total/12) + 1;
            }
            else{
                this.totalPages = parseInt(total/12);
            }
        })
    },
    methods: {
        goJobDetail(){
            //指定跳转地址
            this.$router.replace('/recruiting');
        },
        pageIndexChange(pageIndex){
            getCompanyList(pageIndex,this.cCheck.areaId,this.cCheck.financeIdList,this.cCheck.scaleIdList,this.cCheck.tradeIdList).then(res =>{
                // console.log(res.data.data);
                this.companyLists = res.data.data;
                this.pageIndexs = pageIndex;
            })
        },
        toCompanyDetail(index){
            this.$router.push({
                path:'/companyDetail',
                query: {
                    inPageIndex:index,
                    pages:this.pageIndexs
                } 
            })
        }
    },
}
</script>
<style>
#companyList{
    background-color: #F0F3F6;
    width: 1920px;
    padding-bottom: 32px;
}

#com-body-list{
    width: 1200px;
    margin: 0 auto;
    padding-top: 16px;
    box-sizing: border-box;
}

.similar-company{
    width: 284px;
    height: 140px;
    border: 1px solid #F3F5FB;
    margin-bottom: 16px;
    padding:26px 20px 16px 20px;
    box-sizing: border-box;
    display: inline-block;
    margin: 8px;
    background-color: white;
    /* 解决div并排错位 */
    vertical-align:top;
}

.similar-company .txyx{
    font-size: 16px;
    color: #141419;
    font-weight: bold;
    margin-bottom: 9px;
}

.similar-company .texts{
    color: #646A7E;
    font-size: 14px;
}

.similar-company .txyx:hover{
    color: #1958FB;
}

.similar-company .com-tx{
    width: 48px;
    height: 48px;
    border-radius: 2px;
    border: 1px solid #F3F5FB;
    background-color: white;
    display: inline-block;
    float: right;
}

.similar-company .com-tx img{
    width: 48px;
}

.similar-company .s-bottom{
    border-top: 1px dashed #DCE3E8;
    font-size: 12px;
    color: #99A0AB;
    padding-top: 15px;
    margin-top: 9px;
    line-height: 12px;
}

.locate-detail{
    color: #1958FB;
}

.job-hover:hover{
    text-decoration: underline;
}
</style>